import 'package:flutter/material.dart';

/// Center 示例
/// 展示了 Center 的用法
class MyCenterDemo extends StatelessWidget {
  const MyCenterDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Center Widget Demo'),
        backgroundColor: Colors.blue,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            // 1. 基本用法
            Container(
              color: Colors.grey[200],
              height: 150,
              child: const Center(
                child: Text(
                  '基本居中',
                  style: TextStyle(fontSize: 24),
                ),
              ),
            ),
            const SizedBox(height: 20),

            // 2. 带宽高约束的Center
            Container(
              color: Colors.grey[200],
              height: 150,
              child: const Center(
                heightFactor: 2.0, // 高度因子
                widthFactor: 1.5,  // 宽度因子
                child: Card(
                  color: Colors.blue,
                  child: Padding(
                    padding: EdgeInsets.all(20),
                    child: Text(
                      '带宽高因子的居中',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                      ),
                    ),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 20),

            // 3. 嵌套使用Center
            Container(
              color: Colors.grey[200],
              height: 150,
              child: const Center(
                child: Center(
                  child: FlutterLogo(size: 60),
                ),
              ),
            ),
            const SizedBox(height: 20),

            // 4. Center与其他布局组件结合
            Container(
              color: Colors.grey[200],
              height: 150,
              child: const Center(
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Icon(Icons.star, color: Colors.amber),
                    SizedBox(width: 10),
                    Text('Row在Center中'),
                    SizedBox(width: 10),
                    Icon(Icons.star, color: Colors.amber),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 20),

            // 5. Center与Container结合
            Container(
              color: Colors.grey[200],
              height: 150,
              child: Center(
                child: Container(
                  width: 200,
                  height: 100,
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(10),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.2),
                        blurRadius: 10,
                        offset: const Offset(0, 5),
                      ),
                    ],
                  ),
                  child: const Center(
                    child: Text(
                      'Container在Center中',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                      ),
                    ),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 20),

            // 6. Center与Transform结合
            Container(
              color: Colors.grey[200],
              height: 150,
              child: Center(
                child: Transform.rotate(
                  angle: 0.2, // 旋转角度
                  child: Container(
                    padding: const EdgeInsets.all(20),
                    color: Colors.blue,
                    child: const Text(
                      '旋转的文本',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
      // 7. 浮动按钮示例
      floatingActionButton: const Center(
        heightFactor: 0,
        child: FloatingActionButton(
          onPressed: null,
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}